<template>
  <transition>
    <div :class="prefixCls" v-if="true">
      <Login session-timeout />
    </div>
  </transition>
</template>
<script lang="ts" setup>
  import { onBeforeUnmount, onMounted, ref } from 'vue';

  import { AuthModeEnum } from '@/enums/appEnum';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useAppStore } from '@/store/modules/app';
  import { useAuthStore } from '@/store/modules/auth';
  import { useIdentityStore } from '@/store/modules/identity';

  import Login from './Login.vue';

  const { prefixCls } = useDesign('st-login');
  const identityStore = useIdentityStore();
  const authStore = useAuthStore();
  const appStore = useAppStore();
  const userId = ref<Nullable<number | string>>(0);

  const isBackMode = () => {
    return appStore.getProjectConfig.authMode === AuthModeEnum.BACK;
  };

  onMounted(() => {
    // 记录当前的UserId
    userId.value = identityStore.getUserInfo?.UserId;
  });

  onBeforeUnmount(() => {
    if (userId.value && userId.value !== identityStore.getUserInfo.UserId) {
      // 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
      document.location.reload();
    } else if (isBackMode() && authStore.getLastBuildMenuTime === 0) {
      // 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
      document.location.reload();
    }
  });
</script>
<style lang="scss" scoped>
  $prefix-cls: #{$namespace}-st-login;

  .#{$prefix-cls} {
    position: fixed;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    background: $component-background;
  }
</style>
